import { Handle, Position } from "@xyflow/react";
import Image from "next/image";

export const ImageNode = ({ data }: { data: { imageUrls: string[] } }) => (
  <div
    style={{ minHeight: 200 }} // 确保容器有最小高度，宽度由flex子项决定
    className="rounded-lg bg-accent flex items-center justify-center p-2 gap-2 relative"
  >
    {data.imageUrls && data.imageUrls.length > 0 ? (
      data.imageUrls.map((imageUrl, index) => (
        <div
          key={imageUrl + index} // 使用 imageUrl 和 index 保证 key 的唯一性
          className="relative"
          style={{ width: 200, height: 200 }} // 为每张图片设置固定尺寸 200x200
        >
          <Image
            src={imageUrl}
            alt={`cover-${index}`}
            width={200} // 图片宽度
            height={200} // 图片高度
            className="w-full h-full object-cover rounded"
            unoptimized
          />
        </div>
      ))
    ) : (
      // 可以添加一个占位符或者提示信息，当没有图片时显示
      <div>No images to display</div>
    )}
    <Handle type="target" position={Position.Top} />
    <Handle type="source" position={Position.Bottom} />
  </div>
);
